<!-- 
      comment.html
      查看评论  id="comment"
      
      Created by tang on 2017-03-13.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/swiper.css" />
	<link rel="stylesheet" type="text/css" href="../css/comment.css" />
</head>
<body class="gray">
	<div class="mui-content loading" id="vueMain">
	    <div id="slider" class="mui-slider mui-fullscreen">
	    		<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#item1mobile">全部({{list.msg.all_count}})</a>
				<a class="mui-control-item" href="#item2mobile">有图({{list.msg.photo_count}})</a>
	    		</div>
	    		<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6">
	    			<div></div>
	    		</div>
	    		<div class="mui-slider-group " style="height: 100%;"> 
	    			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
	    				<div id="scroll1" class="mui-scroll-wrapper ">
						<div class="mui-scroll scroll1">
							<div v-if="list.msg.list.length==0" >
								<p style="text-align: center; padding:50px 0">还没有评论呢</p>
							</div>
							<template v-else v-for="(item,index) in list.msg.list">
							  <ul class="mui-table-view" style="margin-top: 0;">
							        <li class="mui-table-view-cell commnet-header">
							            <div class="mui-pull-right">{{item.discuss_time}}</div>
							            <div class="mui-pull-left">
							            		<img :src="item.head_img"  alt="" />
							            		{{item.user_name}}
							            </div>
							        </li>
							        <li class="mui-table-view-cell">
							            <div class="score mui-clearfix">
											<div class="score_star mui-pull-left" :data-score="item.score/2">
											</div>
										</div>
										<div class="comment-body">
											{{item.contents}}
										</div>
										<div class="commnet-image">
											<div class="mui-row">
												<template v-for="(ita,idx) in item.photo">
													<div class="mui-col-xs-3 mui-col-sm-3" >
														<div>
															<img :src="ita" data-preview-src="" :data-preview-group="ita.id" alt="" />
														</div>
													</div>
												</template>
											</div>
										</div>
										<div class="comment-pro mui-clearfix">
											<div class="control-btn">
												<!--<span class="comments">2</span>
												<span class="collect"></span>-->
											</div>
											<p>{{item.goods_name}}</p>
											<p>租赁日期: {{item.buy_time}}</p>
										</div>
							        </li>
							        <li class="mui-table-view-cell commnet-footer" v-if="item.shop_reply">
							            <div class="tis">商家回复</div>
							            <div class="con">{{item.shop_reply}}</div>
							        </li>
							    </ul>  
							   </template>
						</div>
					</div>
	    			</div>
	    			<div id="item2mobile" class="mui-slider-item mui-control-content ">
	    				<div id="scroll2" class="mui-scroll-wrapper">
						<div class="mui-scroll scroll2">
							<div class="mui-loading" v-if="!isActive">
								<div class="mui-spinner">
								</div>
							</div>
							<div v-else-if="imgList.msg.length==0">
								<p style="text-align: center; padding:50px 0">还有没人评论呢!</p>
							</div>
							<template v-else v-for="(item,index) in imgList.msg">
							  <ul class="mui-table-view" style="margin-top: 0;">
							        <li class="mui-table-view-cell commnet-header">
							            <div class="mui-pull-right">{{item.discuss_time}}</div>
							            <div class="mui-pull-left">
							            		<img :src="item.head_img"  alt="" />
							            		{{item.user_name}}
							            </div>
							        </li>
							        <li class="mui-table-view-cell">
							            <div class="score mui-clearfix">
											<div class="score_star mui-pull-left" :data-score="item.score/2">
											</div>
										</div>
										<div class="comment-body">
											{{item.contents}}
										</div>
										<div class="commnet-image">
											<div class="mui-row" >
												<template v-for="(ita,idx) in item.photo">
												<div class="mui-col-xs-3 mui-col-sm-3">
													<div>
														<img :src="ita" data-preview-src="" data-preview-group="ita.id" alt="" />
													</div>
												</div>
												</template> 
											</div>
										</div>
										<div class="comment-pro mui-clearfix">
											<div class="control-btn">
												<!--<span class="comments">2</span>
												<span class="collect"></span>-->
											</div>
											<p>{{item.goods_name}}</p>
											<p>租赁日期: {{item.buy_time}}</p>
										</div>
							        </li>
							    </ul>  
							   </template>
						</div>
					</div>
	    			</div>
	    		</div>
	    </div>
	</div>
<script src="../js/mui-edit.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps , views, user;
	mui.init({
		swipeBack: false,
		beforeback:function(){
			if( plus.webview.currentWebview().opener().id == 'detail' || plus.webview.currentWebview().opener().id == 'detail1' ){
				bexta.setStatus(true);
			}
		}
	})
	mui.plusReady(function () {
	    views = bexta.getWebview();
	    user = bexta.getStorage(USER);
	    bexta.setStatus(false)
	   bexta.ajax(api.discuss_list, function(res){
	   		initVue(res);
	   }, {data:{goods_id:views.gid, type:1,firstrow:0,listrow:10}});
	});
	function initVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				list:{
					first:res.list.length,
					last:10,
					msg:res,
				},
				isActive:false,
				imgList:{
					msg:[],
					first:0
				}
			},
			mounted:function(){
				var self = this;
				document.querySelector('.loading').classList.add('loadRun');
				mui.previewImage();
			   	mui('.mui-slider').slider();
				mui('.mui-scroll-wrapper').scroll();
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					slidesPerView: 3.5, //同时能显示多少个
					paginationClickable: false,
					spaceBetween: "5%", //右间距
					slidesOffsetBefore: 15,
					slidesOffsetAfter: 15,
					freeMode: true, //使用惯性滑动
					onTap: function(swiper, evt) {
					}
				});
				document.getElementById('slider').addEventListener('slide', function(e) {
					if( e.detail.slideNumber == 1 && !self.isActive ){
						bexta.ajax(api.discuss_list, function(res){
							self.isActive = !self.isActive;
							mui.each(res.list, function(){
								self.imgList.msg.push(this);
							});
						},{data:{goods_id:views.gid, type:2,firstrow:self.imgList.first,listrow:self.list.last}})
					}
				});
				if( self.list.msg.list  > 3 ){
					//少于3条数据,不用上下拉了
					mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						mui(pullRefreshEl).pullToRefresh({
							up: {
								callback: function() {
									var that = this;
									if( pullRefreshEl.classList.contains('scroll1') ){
										//全部
										bexta.ajax(api.discuss_list, function(res){
											if( res.list.length < self.list.last){
												that.endPullUpToRefresh(true);
											}else{
												that.endPullUpToRefresh(false);
												mui.each(res.list, function(){
													self.list.msg.list.push(this);	
												});
												self.list.msg.first = self.list.msg.list.length;
											}
								   		}, {data:{goods_id:views.gid, type:1,firstrow:self.list.first,listrow:self.list.last}});
									}else{
										//有图
										bexta.ajax(api.discuss_list, function(res){
											if( res.list.length < self.list.last){
												that.endPullUpToRefresh(true);
											}else{
												that.endPullUpToRefresh(false);
												mui.each(res.list, function(){
													self.imgList.msg.push(this);	
												});
												self.imgList.first = self.imgList.msg.length;
											}
								   		}, {data:{goods_id:views.gid, type:2,firstrow:self.imgList.first,listrow:self.list.last}});
									}
									
								}
							}
						});
					});
				}
				
				
			},
			updated:function(){
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					slidesPerView: 3.5, //同时能显示多少个
					paginationClickable: false,
					spaceBetween: "5%", //右间距
					slidesOffsetBefore: 15,
					slidesOffsetAfter: 15,
					freeMode: true, //使用惯性滑动
					onTap: function(swiper, evt) {
					}
				});
			}
		});
	}
</script>
</body>
</html>